<template>
  <input type="text" :value="modelValue" @input="emitValue">
</template>

<script setup>
// 要给组件的v-model添加修饰符，都可以通过 modelModifiers prop 在组件内访问到。下例中，我们创建一个包含 modelModifiers prop的组件，默认值是一个空对象
const props = defineProps({
  modelValue: String,
  modelModifiers: {
    default: () => ({})
  }
})

const emit = defineEmits(['update:modelValue'])
console.log(props.modelModifiers);

// 检索 modelModifiers 对象的 key 并写一个处理函数来改变抛出事件附带的值。在每次 <input />元素抛出input事件时执行大写首字母
function emitValue(e) {
  let value = e.target.value
  if (props.modelModifiers.capitalize) {
    value = value.charAt(0).toUpperCase() + value.slice(1)
  }
  emit('update:modelValue', value)
}
</script>

<style scoped>

</style>